import React, { useState, useEffect } from 'react';
import { Card, Row, Col, Statistic, Progress, Table, Tag, Typography, Space } from 'antd';
import { UserOutlined, FileTextOutlined, EyeOutlined, LikeOutlined, CommentOutlined, TeamOutlined, SettingOutlined, HistoryOutlined } from '@ant-design/icons';
import './Dashboard.css';

const { Title, Text } = Typography;

const Dashboard = () => {
  const [stats, setStats] = useState({
    totalUsers: 0,
    totalArticles: 0,
    totalViews: 0,
    totalComments: 0
  });

  const [recentArticles, setRecentArticles] = useState([]);
  const [systemInfo, setSystemInfo] = useState({});

  useEffect(() => {
    // 模拟数据加载
    const mockStats = {
      totalUsers: 1250,
      totalArticles: 89,
      totalViews: 45680,
      totalComments: 1234
    };

    const mockRecentArticles = [
      {
        id: 1,
        title: 'React入门教程',
        author: '管理员',
        views: 1250,
        likes: 89,
        comments: 23,
        status: 'published',
        publishDate: '2024-01-15'
      },
      {
        id: 2,
        title: 'Vue.js最佳实践',
        author: '管理员',
        views: 890,
        likes: 67,
        comments: 15,
        status: 'published',
        publishDate: '2024-01-12'
      },
      {
        id: 3,
        title: 'Node.js后端开发',
        author: '管理员',
        views: 1560,
        likes: 120,
        comments: 34,
        status: 'published',
        publishDate: '2024-01-08'
      },
      {
        id: 4,
        title: 'TypeScript进阶指南',
        author: '编辑',
        views: 780,
        likes: 45,
        comments: 12,
        status: 'draft',
        publishDate: null
      }
    ];

    const mockSystemInfo = {
      serverStatus: '正常',
      databaseStatus: '正常',
      memoryUsage: 65,
      diskUsage: 42,
      cpuUsage: 28
    };

    setStats(mockStats);
    setRecentArticles(mockRecentArticles);
    setSystemInfo(mockSystemInfo);
  }, []);

  const recentArticlesColumns = [
    {
      title: '文章标题',
      dataIndex: 'title',
      key: 'title',
      render: (text) => <Text strong>{text}</Text>,
    },
    {
      title: '作者',
      dataIndex: 'author',
      key: 'author',
    },
    {
      title: '浏览量',
      dataIndex: 'views',
      key: 'views',
      render: (views) => (
        <Space>
          <EyeOutlined />
          {views}
        </Space>
      ),
    },
    {
      title: '点赞数',
      dataIndex: 'likes',
      key: 'likes',
      render: (likes) => (
        <Space>
          <LikeOutlined />
          {likes}
        </Space>
      ),
    },
    {
      title: '评论数',
      dataIndex: 'comments',
      key: 'comments',
      render: (comments) => (
        <Space>
          <CommentOutlined />
          {comments}
        </Space>
      ),
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status) => {
        const statusMap = {
          published: { text: '已发布', color: 'green' },
          draft: { text: '草稿', color: 'orange' },
          archived: { text: '已归档', color: 'default' }
        };
        const statusInfo = statusMap[status] || { text: '未知', color: 'red' };
        return <Tag color={statusInfo.color}>{statusInfo.text}</Tag>;
      },
    },
    {
      title: '发布时间',
      dataIndex: 'publishDate',
      key: 'publishDate',
      render: (date) => date || '-',
    },
  ];

  return (
    <div className="dashboard">
      <div className="dashboard-header">
        <Title level={2}>仪表盘</Title>
        <Text type="secondary">欢迎回来，管理员！这里是系统概览</Text>
      </div>

      {/* 统计卡片 */}
      <Row gutter={[16, 16]} className="stats-row">
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="总用户数"
              value={stats.totalUsers}
              prefix={<UserOutlined />}
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="总文章数"
              value={stats.totalArticles}
              prefix={<FileTextOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="总浏览量"
              value={stats.totalViews}
              prefix={<EyeOutlined />}
              valueStyle={{ color: '#722ed1' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="总评论数"
              value={stats.totalComments}
              prefix={<CommentOutlined />}
              valueStyle={{ color: '#cf1322' }}
            />
          </Card>
        </Col>
      </Row>

      {/* 系统状态和最近文章 */}
      <Row gutter={[16, 16]} className="content-row">
        <Col xs={24} lg={12}>
          <Card title="系统状态" className="system-status-card">
            <Row gutter={[16, 16]}>
              <Col span={12}>
                <div className="status-item">
                  <Text strong>服务器状态：</Text>
                  <Tag color="green">{systemInfo.serverStatus}</Tag>
                </div>
              </Col>
              <Col span={12}>
                <div className="status-item">
                  <Text strong>数据库状态：</Text>
                  <Tag color="green">{systemInfo.databaseStatus}</Tag>
                </div>
              </Col>
              <Col span={24}>
                <div className="progress-item">
                  <Text strong>内存使用率：</Text>
                  <Progress percent={systemInfo.memoryUsage} size="small" />
                </div>
              </Col>
              <Col span={24}>
                <div className="progress-item">
                  <Text strong>磁盘使用率：</Text>
                  <Progress percent={systemInfo.diskUsage} size="small" />
                </div>
              </Col>
              <Col span={24}>
                <div className="progress-item">
                  <Text strong>CPU使用率：</Text>
                  <Progress percent={systemInfo.cpuUsage} size="small" />
                </div>
              </Col>
            </Row>
          </Card>
        </Col>
        <Col xs={24} lg={12}>
          <Card title="最近文章" className="recent-articles-card">
            <Table
              columns={recentArticlesColumns}
              dataSource={recentArticles}
              pagination={false}
              size="small"
              scroll={{ x: true }}
            />
          </Card>
        </Col>
      </Row>

      {/* 快速操作 */}
      <Row gutter={[16, 16]} className="quick-actions-row">
        <Col span={24}>
          <Card title="快速操作" className="quick-actions-card">
            <Row gutter={[16, 16]}>
              <Col xs={24} sm={12} md={6}>
                <Card hoverable className="quick-action-item">
                  <TeamOutlined style={{ fontSize: '24px', color: '#1890ff' }} />
                  <div className="action-title">用户管理</div>
                  <Text type="secondary">管理系统用户</Text>
                </Card>
              </Col>
              <Col xs={24} sm={12} md={6}>
                <Card hoverable className="quick-action-item">
                  <FileTextOutlined style={{ fontSize: '24px', color: '#52c41a' }} />
                  <div className="action-title">文章管理</div>
                  <Text type="secondary">管理文章内容</Text>
                </Card>
              </Col>
              <Col xs={24} sm={12} md={6}>
                <Card hoverable className="quick-action-item">
                  <SettingOutlined style={{ fontSize: '24px', color: '#faad14' }} />
                  <div className="action-title">系统设置</div>
                  <Text type="secondary">配置系统参数</Text>
                </Card>
              </Col>
              <Col xs={24} sm={12} md={6}>
                <Card hoverable className="quick-action-item">
                  <HistoryOutlined style={{ fontSize: '24px', color: '#722ed1' }} />
                  <div className="action-title">操作日志</div>
                  <Text type="secondary">查看系统日志</Text>
                </Card>
              </Col>
            </Row>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Dashboard;